<template>
  <div>
    <div class="panel monitor">
      <div class="inner">
        <div class="tabs">
          <a
            href="javascript:;"
            @click="activeID = 0"
            :class="activeID == 0 ? 'active' : ''"
            >异常设备监控</a
          >
          <a
            href="javascript:;"
            @click="activeID = 1"
            :class="activeID == 1 ? 'active' : ''"
            >故障设备监控</a
          >
        </div>
        <div class="content">
          <div class="head">
            <span class="col">{{ activeID == 1 ? "异常" : "故障" }}时间</span>
            <span class="col">设备地址</span>
            <span class="col">异常代码</span>
          </div>
          <div class="marquee-view">
            <div class="marquee">
              <div class="row" v-for="item in loopData[activeID]" :key="String(item.bianhao)">
                <span class="col">{{ item.id }}</span>
                <span class="col">{{ item.addr }}</span>
                <span class="col">{{ item.bianhao }}</span>
                <span class="icon-dot"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeID: 0,
      loopData: [
        [
          {
            id: 20180701,
            addr: "北京市昌平西路金燕龙写字楼",
            bianhao: 1000001,
          },
          {
            id: 20190601,
            addr: "北京市昌平区城西路金燕龙写字楼",
            bianhao: 1000002,
          },
          {
            id: 20190704,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 1000003,
          },
          {
            id: 20180705,
            addr: "北京市昌平区建路金燕龙写字楼",
            bianhao: 1000004,
          },
          {
            id: 20190706,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 1000005,
          },
          {
            id: 20190707,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 1000006,
          },
          {
            id: 20190708,
            addr: "北京市昌平区建西路金燕龙写字楼",
            bianhao: 1000007,
          },
          {
            id: 20190709,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 1000008,
          },
          {
            id: 20190711,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 1000009,
          },
          {
            id: 20190710,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 1000010,
          },



          {
            id: 20190707,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 1000011,
          },
          {
            id: 20190708,
            addr: "北京市昌平区建西路金燕龙写字楼",
            bianhao: 1000012,
          },
          {
            id: 20190709,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 1000013,
          },
          {
            id: 20190711,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 1000014,
          },
          {
            id: 20190710,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 1000015,
          },
          {
            id: 20190710,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 1000016,
          },
        ],
        [
          {
            id: 20220701,
            addr: "北京市昌平西路金燕龙写字楼",
            bianhao: 1000001,
          },
          {
            id: 20220601,
            addr: "北京市昌平区城西路金燕龙写字楼",
            bianhao: 1000002,
          },
          {
            id: 20220704,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 1000003,
          },
          {
            id: 20220705,
            addr: "北京市昌平区建路金燕龙写字楼",
            bianhao: 1000004,
          },
          {
            id: 20220706,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 1000005,
          },
          {
            id: 20220707,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 1000006,
          },
          {
            id: 20220708,
            addr: "北京市昌平区建西路金燕龙写字楼",
            bianhao: 1000007,
          },
          {
            id: 20220709,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 1000008,
          },
          {
            id: 20220711,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 1000009,
          },
          {
            id: 20220710,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 1000010,
          },




          {
            id: 20220706,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 1000011,
          },
          {
            id: 20220707,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 1000012,
          },
          {
            id: 20220708,
            addr: "北京市昌平区建西路金燕龙写字楼",
            bianhao: 1000013,
          },
          {
            id: 20220709,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 10000114,
          },
          {
            id: 20220711,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 1000015,
          },
          {
            id: 20220710,
            addr: "北京市昌平区建材城西路金燕龙写字楼",
            bianhao: 1000016,
          },
        ],
      ],
    };
  },
};
</script>

<style scoped>
/* 设备监控区域 */
  /* 区域高度 */
  .monitor {
    height: 7.7rem;
  }
  .monitor .inner {
    padding: 0.4rem 0 0 0;
    display: flex;
    flex-direction: column;
  }
  .monitor .tabs{
    padding: 0 0.45rem;
    margin-bottom: 0.225rem;
    display: flex;
  }
  .monitor .tabs a {
    color: #1950c4;
    font-size: 0.3rem;
    padding: 0 0.3375rem;
  }
  .monitor .tabs a:first-child{
    padding-left: 0.2rem;
    border-right: 0.025rem solid #00f2f1;
  }
  .active {
    color: #fff !important;
  }
  .monitor .content {
    flex: 1;
    position: relative;
  }
  .monitor .head{
    display: flex;
    justify-content: space-between;
    line-height: 1.21;
    background-color: rgba(255,255,255,0.1);
    padding: 0.15rem 0.45rem;
    color: #68d8fe;
    font-size: 0.25rem;
    margin-bottom: 0.12rem;
  }
  .monitor .marquee-view{
    position: absolute;
    top: 0.5rem;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    margin-top: 0.2rem;
  }
  .monitor .row{
    display: flex;
    justify-content: space-between;
    line-height: 1.1;
    font-size: 0.25rem;
    color: #61a8ff;
    padding: 0.15rem 0.45rem;
  }
  .monitor .row .icon-dot{
    width: 5px;
    height: 10px;
    background-color: #61a8ff;
    position: absolute;
    left: 0.2rem;
    opacity: 0;
  }
  .monitor .row:hover{
    background-color: rgba(255, 255, 255, 0.1);
    color: #68d8fe;
  }
  .monitor .row:hover .icon-dot{
    opacity: 1;
  }
  .monitor .col:first-child{
    width: 1rem;
  }
  .monitor .col:nth-child(2){
    width: 2.5rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .monitor .col:nth-child(3){
    width: 1rem;
  }
  .marquee-view .marquee{
    position: relative;
    overflow: hidden;
    animation: mymove 15s linear infinite;
  }

  @keyframes mymove {
    0% {
    }
    100% {
      transform: translateY(-50%);
    }
}
/* 鼠标经过marquee 就停止动画 */
.marquee-view .marquee:hover {
    animation-play-state: paused;
}

  @keyframes mymove
  {
      from {top:0%;}
      to {top:-50%;}
  }
</style>